<template>
  <div class="home">
    <my-header></my-header>
    <section>
      <div class="block home_wrap">
        <el-carousel :height='height'>
          <!-- for循环轮播 -->
          <!-- <el-carousel-item v-for="item in banner" :key='1'>
            <a href="" title="">
              <img v-bind:src="item.img" alt="">
            </a>
          </el-carousel-item> -->
          <el-carousel-item  :key='1' class='home_carousel'>
            <a href="" title="">
              <img src="../assets/img/banner_1.jpg" alt="">
            </a>
          </el-carousel-item>
        </el-carousel>
        <!-- 左侧导航 -->
        <div class="wrap">
          <div class="home_tag_wrap clearfixed">
            <ul class='home_tag_left'>
              <li name='first' :class='{isbackground:isbackground=="first"}' v-on:click='tagLeft("first")' ref='firstImg'><img src="../assets/img/findproduct_1.png" alt="" v-show='show_1'><img src="../assets/img/findproduct_2.png" alt=""  v-show='!show_1'>找产品</li>
              <li name='second' :class='{isbackground:isbackground=="second"}' v-on:click='tagLeft("second")'><img src="../assets/img/findmoney_1.png" alt=""  v-show='show_2'><img src="../assets/img/findmoney_2.png" alt=""  v-show='!show_2'>找资金</li>
              <li name='third' :class='{isbackground:isbackground=="third"}' v-on:click='tagLeft("third")'><img src="../assets/img/findcourse.png" alt="" v-show='show_3'><img src="../assets/img/findcourse_2.png" alt=""  v-show='!show_3'>找客户</li>
              <li name='forth' :class='{isbackground:isbackground=="forth"}' v-on:click='tagLeft("forth")'><img src="../assets/img/findtechnology.png" alt="" v-show='show_4'><img src="../assets/img/findtechnology_2.png" alt="" v-show='!show_4'>找技术</li>
            </ul>
            <div class="home_tag_right">
              <div class="tag_right_first" v-show='show_1'>
                <form action="" >
                  <div class="tag_right_one clearfixed">
                    <input type="text" placeholder="请输入牌号,厂商搜索" class='tag_right_one_top'>
                    <button class="right_search_btn" type="button" @click='right_search'>
                      <img src="../assets/img/search.png" alt="">
                    </button>
                  </div>
                  <div class="tag_right_two">
                    热门搜索:<a href="javascript::" target='_blank' v-for='searchthing in hot_search'>{{searchthing.productName}}</a>
                  </div>
                  <div class="tag_right_three">
                    <span class='title'>
                      分类
                    </span>
                    <div class="three_content">
                      <input type="text" v-model='showtype'  class='option_content'>
                      <select name="" id="" @change='selectType' v-model='findtype'>
                        <option :value="item.selectVal" v-for='item in find_type'>{{item.selectVal}}</option>
                      </select>
                      <img src="../assets/img/select_tag.png" alt="">
                    </div>
                  </div>
                  <div class="tag_right_three" style="margin:21px 0 21px 0">
                    <span class='title'>
                      产地
                    </span>
                    <div class="three_content">
                      <input type="text" v-model='showplace'  class='option_content'>
                      <select name="" id="" @change='selectplace' v-model='findplace'>
                        <option :value="item1.placeVal" v-for='item1 in find_place'>{{item1.placeVal}}</option>
                      </select>
                      <img src="../assets/img/select_tag.png" alt="">
                    </div>
                  </div>
                  <div class="tag_right_three" style="margin:21px 0 21px 0">
                    <span class='title'>
                      交货地
                    </span>
                    <div class="three_content">
                      <input type="text" v-model='showdelivery'  class='option_content'>
                      <select name="" id="" @change='deliveryplace' v-model='delselplace'>
                        <option :value="item2.placeVal" v-for='item2 in delivery_place'>{{item2.placeVal}}</option>
                      </select>
                      <img src="../assets/img/select_tag.png" alt="">
                    </div>
                  </div>
                  <button type="button" class='fprBtn'>搜索</button>
                </form>
              </div>
              <!-- 找资金 -->
              <div class="tag_right_first" v-show='!show_2'>
                <form action="" >
                  <div class="tag_right_one clearfixed">
                    <input type="text" placeholder="请sdf输入牌号,厂商搜索" class='tag_right_one_top'>
                    <button class="right_search_btn" type="button" @click='right_search'>
                      <img src="../assets/img/search.png" alt="">
                    </button>
                  </div>
                  <div class="tag_right_two">
                    热门搜索:<a href="javascript::" target='_blank' v-for='searchthing in hot_search'>{{searchthing.productName}}</a>
                  </div>
                  <div class="tag_right_three">
                    <span class='title'>
                      分类
                    </span>
                    <div class="three_content">
                      <input type="text" v-model='showtype'  class='option_content'>
                      <select name="" id="" @change='selectType' v-model='findtype'>
                        <option :value="item.selectVal" v-for='item in find_type'>{{item.selectVal}}</option>
                      </select>
                      <img src="../assets/img/select_tag.png" alt="">
                    </div>
                  </div>
                  <div class="tag_right_three" style="margin:21px 0 21px 0">
                    <span class='title'>
                      产地
                    </span>
                    <div class="three_content">
                      <input type="text" v-model='showplace'  class='option_content'>
                      <select name="" id="" @change='selectplace' v-model='findplace'>
                        <option :value="item1.placeVal" v-for='item1 in find_place'>{{item1.placeVal}}</option>
                      </select>
                      <img src="../assets/img/select_tag.png" alt="">
                    </div>
                  </div>
                  <div class="tag_right_three" style="margin:21px 0 21px 0">
                    <span class='title'>
                      交货地
                    </span>
                    <div class="three_content">
                      <input type="text" v-model='showdelivery'  class='option_content'>
                      <select name="" id="" @change='deliveryplace' v-model='delselplace'>
                        <option :value="item2.placeVal" v-for='item2 in delivery_place'>{{item2.placeVal}}</option>
                      </select>
                      <img src="../assets/img/select_tag.png" alt="">
                    </div>
                  </div>
                  <button type="button" class='fprBtn'>搜索</button>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 自选产品清单 -->
      <div class="wrap optionalList" >
        <el-tabs type="border-card">
          <el-tab-pane label="自选产品清单">
          <!-- <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table> -->
      
          </el-tab-pane>
          <el-tab-pane label="自选清单">sdfsdf</el-tab-pane>
        </el-tabs>
      </div>
      <!-- echart -->
      <!-- <div id="main" style="width: 600px;height:400px;"></div> -->
    </section>
    <my-footer></my-footer>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "home",
  data() {
    return {
     banner:[],
     height:'420px',
     isbackground:'first',
     show_1:true,
     show_2:true,
     show_3:true,
     show_4:true,
     hot_search:[],
     find_type:[],
     findtype:'',
     showtype:'全部',
     showplace:'全部',
     findplace:'',
     find_place:[],
     delivery_place:[],
     delselplace:'',
     showdelivery:'全部',
     tableData:[{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
     }],  // 自选列表清单


    }
  },
  created(){
    $('.el-carousel__container').height(420);
    console.log($('.el-carousel__container').height())
    console.log(document.body.clientWidth)
    var fa = this;

    // 轮播
    // axios.get('/api/seller')
    // .then(function (data) {
    //   // console.log(data)
    //   // console.log(data.data.data)
    //   if(data.data.code == 0){
    //     var image = data.data.data.banners;
    //     if(image.code == 0){
    //       fa.banner = image.data;
    //     }
    //     console.log(fa.banner);
    //   }else if(data.data.code == 400){

    //   }

    // });

    var _this = this;
    // 搜索框底部内容
    axios.get("/api/seller").then(function(data) {
      if (data.data.code == 0) {
        _this.hot_search = data.data.data.searchList_2.data;
        // console.log(_this.searchList);
      } else if (data.data.code == 400) {
      }
    });

    // 找产品
    // 分类
    axios.get("/api/seller").then(function(data) {
      console.log(data.data);

      if (data.data.code == 0) {
        _this.find_type = data.data.data.selectgrops.data;
        console.log(_this.find_type);
      } else if (data.data.code == 400) {
      }
    });
    // 产地
    axios.get("/api/seller").then(function(data) {
      console.log(data.data);

      if (data.data.code == 0) {
        _this.find_place = data.data.data.placegrops.data;
        // 交货地
        _this.delivery_place = data.data.data.placegrops.data;
        console.log(_this.find_place);
      } else if (data.data.code == 400) {
      }
    });

    // var creathat = this;
    //  axios.get('/api/seller')
    // .then(function (data) {
    //   console.log(data.data.data.productList.data,'aaa')
    //   if(data.data.code == 0){
    //     creathat.optionList = data.data.data.productList.data;
    //     console.log(creathat.optionList,'ss')
        
    //   }else if(data.data.code == 400){
        
    //   }
    // });

  },
  mounted(){

    // echarts实例
     // var myChart = echarts.init(document.getElementById('main'));

     //    // 指定图表的配置项和数据
     //    var option = {
     //        title: {
     //            text: 'ECharts 入门示例'
     //        },
     //        tooltip: {},
     //        legend: {
     //            data:['销量']
     //        },
     //        xAxis: {
     //            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
     //        },
     //        yAxis: {},
     //        series: [{
     //            name: '销量',
     //            type: 'bar',
     //            data: [5, 20, 36, 10, 10, 20]
     //        }]
     //    };

     //    // 使用刚指定的配置项和数据显示图表。
     //    myChart.setOption(option);
      },
  methods :{
    // 左侧导航,
    tagLeft(str) {
      var that = this;
      this.isbackground = str;
      if (str == "first") {
        that.show_1 = true;
        that.show_2 = true;
        that.show_3 = true;
        that.show_4 = true;
      } else if (str == "second") {
        that.show_1 = false;
        that.show_2 = false;
        that.show_3 = true;
        that.show_4 = true;
      } else if (str == "third") {
        that.show_1 = false;
        that.show_2 = true;
        that.show_3 = false;
        that.show_4 = true;
      } else if (str == "forth") {
        that.show_1 = false;
        that.show_2 = true;
        that.show_3 = true;
        that.show_4 = false;
      }
    },
    right_search() {
      if ($(".tag_right_one_top").val() != "") {
        $(".right_search_btn").attr("type", "submit");
      }
    },
    //
    selectType() {
      this.showtype = this.findtype;
    },
    selectplace() {
      this.showplace = this.findplace;
    },
    deliveryplace() {
      this.showdelivery = this.delselplace;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
@import "src/assets/scss/home";
</style>
<style  lang='scss'>
/*自选清单*/
.optionalList{
    margin-top: 25px;
    .el-popover, .el-tabs--border-card{
      box-shadow: none;
      border:none;
      .el-tabs__header{
        height: 50px;
        border-bottom: 2px solid #009fe2;
        background-color: #fff!important; 
        .el-tabs__nav{
          left:14px;
          .el-tabs__item{
            font-size: 18px;
            line-height: 50px;
            height: 50px;
            transition: none;
          }
        }
      } 
    }
    .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
      border: 2px solid #009fe2;
      border-bottom-color: #fff;

    }
   
}
  
</style>
